<template>
  <el-main style="padding: 0px; margin: 0px">
    <el-row justify="space-between">
      <!-- 左table -->
      <el-col :lg="11">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="日期" width="150">
            <template #default="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{scope.row.date}}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="130">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top">
                <template #default>
                  <p>姓名: {{scope.row.name}}</p>
                  <p>住址: {{scope.row.address}}</p>
                </template>
                <template #reference>
                  <div class="name-wrapper">
                    <el-tag size="small">{{scope.row.name}}</el-tag>
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="手机号" property="mobile" />
          <el-table-column label="地址" property="address" />
        </el-table>
      </el-col>
      <!-- 右table -->
      <el-col :lg="11" style="margin-top: 8px">
        <el-table :data="sourceData" style="width: 100%">
          <el-table-column label="头像" width="180" align="center">
            <template #default="scope">
              <el-image :src="scope.row.avatar" :preview-src-list="list" class="avatar" />
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="130" property="name" />
          <el-table-column label="地址" width="160" property="address" show-overflow-tooltip />
          <el-table-column label="操作" align="center">
            <template>
              <el-button size="small" type="primary" class="primary">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup>
const tableData = [
  {date: "2016-05-03", name: "Tom", address: "中国加油！祖国必胜"},
  {date: "2016-05-02", name: "Tom", address: "中国加油！祖国必胜"},
  {date: "2016-05-04", name: "Tom", address: "中国加油！祖国必胜"},
  {date: "2016-05-01", name: "Tom", address: "中国加油！祖国必胜"},
  {date: "2016-05-01", name: "Tom", address: "中国加油！祖国必胜"},
  {date: "2016-05-01", name: "Tom", address: "中国加油！祖国必胜"},
].map(item => Object.assign({}, item, {mobile: 12121212}))
const sourceData = [
  {date: "2016-05-03", name: "Tom", address: "Angeles"},
  {date: "2016-05-02", name: "jie", address: "Angeles"},
  {date: "2016-05-04", name: "Tom", address: "Angeles"},
  {date: "2016-05-01", name: "Tom", address: "Angeles"},
].map((item, index) => Object.assign({}, item, {avatar: require('@/assets/users/' + (index + 1) + '.png')}))

const list = sourceData.map(e => e.avatar)
</script>

<style scoped lang="scss">
.avatar {
  @include wh(35px, 35px);
  @include borderRadius(50%);
}
</style>
